<template>
	<view class="box">
		<view class="box1">
			<u-swiper :list="list" :height="400"></u-swiper>
		</view>

		<view class="box2">
			<u-grid :col="4" :border="false">
				<u-grid-item>
					<u-icon name="photo" :size="46"></u-icon>
					<view class="grid-text">装修报价</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="lock" :size="46"></u-icon>
					<view class="grid-text">设计师</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="hourglass" :size="46"></u-icon>
					<view class="grid-text">设计案例</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="photo" :size="46"></u-icon>
					<view class="grid-text">关于总裁</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="lock" :size="46"></u-icon>
					<view class="grid-text">全案体系</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="hourglass" :size="46"></u-icon>
					<view class="grid-text">良心工程</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="lock" :size="46"></u-icon>
					<view class="grid-text">极致环保</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="hourglass" :size="46"></u-icon>
					<view class="grid-text">客户服务</view>
				</u-grid-item>
			</u-grid>
		</view>

		<view class="box3">
			<view class="box3-top">
				<view>设计案例 | DESIGN WORKS</view>
				<view>查看更多 >></view>
			</view>
			<view class="box3-center">
				<view class="box3-center1">
					<image src="@/static/image/changpin1.jpg" />
				</view>
				<view class="box3-center2">蠡湖一号 | 400平方米 | 现代简约</view>
			</view>
			<view class="box3-center">
				<view class="box3-center1">
					<image src="@/static/image/changpin1.jpg" />
				</view>
				<view class="box3-center2">高尔夫别墅 | 400平方米 | 现代简约</view>
			</view>

		</view>
		<view style="background-color: #efefef;height: 20rpx;"></view>

		<view class="box4">
			<view class="box4-top">
				<view>设计师推荐 | DESIGN WORKS</view>
				<view>查看更多 >></view>
			</view>
			<view class="box4-center">
				<view class="box4-center1">
					<image src="@/static/image/老板.png" />
					<view class="font1">
						王一哲<br>
						郑州分公司设计总监
					</view>
				</view>
				<view class="box4-center1">
					<image src="@/static/image/老板.png" />
					<view class="font1">
						王一哲<br>
						郑州分公司设计总监
					</view>
				</view>
				<view class="box4-center1">
					<image src="@/static/image/老板.png" />
					<view class="font1">
						王一哲<br>
						郑州分公司设计总监
					</view>
				</view>
			</view>
		</view>
		<view style="background-color: #efefef;height: 20rpx;"></view>


		<view class="box5">
			<view class="box5-top">
				<view>良心工艺 | DESIGN WORKS</view>
				<view>查看更多 >></view>
			</view>
			<view class="box5-bottom">
				<view class="box5-bottom1">
					<image src="@/static/image/changpin1.jpg" />
					<view class="a1">水电工艺</view>
				</view>
				<view class="box5-bottom2">
					<view class="little-box">
						<image src="@/static/image/changpin1.jpg" />
						<view class="a2">水电工艺</view>
					</view>
					<view class="little-box">
						<image src="@/static/image/changpin1.jpg" />
						<view class="a2">水电工艺</view>
					</view>
					<view class="little-box">
						<image src="@/static/image/changpin1.jpg" />
						<view class="a2">水电工艺</view>
					</view>
					<view class="little-box">
						<image src="@/static/image/changpin1.jpg" />
						<view class="a2">水电工艺</view>
					</view>
				</view>
			</view>
		</view>
		<view style="background-color: #efefef;height: 20rpx;"></view>

		<view class="box6">
			<view class="box6-top">
				<view>业主故事 | DESIGN WORKS</view>
				<view>查看更多 >></view>
			</view>
			<view class="box6-bottom">
				<view class="box6-center">
					<view class="box6-center1">
						<image src="@/static/image/changpin4.jpg" />
					</view>
					<view class="box6-center2">半山壹号 | 白女士</view>
				</view>
				<view class="box6-center">
					<view class="box6-center1">
						<image src="@/static/image/changpin4.jpg" />
					</view>
					<view class="box6-center2">半山壹号 | 白女士</view>
				</view>
			</view>
		</view>
		<view style="background-color: #efefef;height: 20rpx;"></view>

		<view class="box7">
			<view class="box7-top">
				<view>大业荣誉 | DESIGN WORKS</view>
				<view>查看更多 >></view>
			</view>
			<view class="box7-center">
				<view class="box7-center1">
					<image src="@/static/image/changpin1.jpg" />
				</view>
				<view class="box7-center2">硕果累累 | 初心不忘 以行践言</view>
			</view>
		</view>

		<view class="box8">
			<view class="box8-top">
				<view>大业美家 | DESIGN WORKS</view>
				<view>查看更多 >></view>
			</view>
			<view class="box8-bottom">
				<view class="box8-center">
					<image src="@/static/image/changpin1.jpg" />
					<view class="box8-center2">
						<view class="box8-font1"><span class="box8-font2">9</span>年专注</view>
						<view class="box8-font3">做别墅大设计</view>
					</view>
				</view>
				<view class="box8-center">
					<image src="@/static/image/changpin1.jpg" />
					<view class="box8-center2">
						<view class="box8-font1"><span class="box8-font2">9</span>年专注</view>
						<view class="box8-font3">做别墅大设计</view>
					</view>
				</view>
				<view class="box8-center">
					<image src="@/static/image/changpin1.jpg" />
					<view class="box8-center2">
						<view class="box8-font1"><span class="box8-font2">9</span>年专注</view>
						<view class="box8-font3">做别墅大设计</view>
					</view>
				</view>
				<view class="box8-center">
					<image src="@/static/image/changpin1.jpg" />
					<view class="box8-center2">
						<view class="box8-font1"><span class="box8-font2">9</span>年专注</view>
						<view class="box8-font3">做别墅大设计</view>
					</view>
				</view>
			</view>
		</view>

		<view class="box9">
			<image src="@/static/image/2.jpg" />
		</view>

		<view class="box10">
			<view class="box10-center">
				<view class="font1">预约装修</view>
				<view class="font2">RESERVATION FOR FREE ROOM</view>
				<input @click="show = true" v-model="city" type="text" placeholder="地区（必填）" disabled class="text" />
				<input type="text" placeholder="姓名（必填）" class="text" />
				<input type="text" placeholder="联系方式（必填）" class="text" />
				<input type="text" placeholder="楼盘（必填）" class="text" />
				<button>立即预约</button>
				<u-picker mode="region" v-model="show" @confirm="getCity"></u-picker>
			</view>
		</view>

		<view class="last">
			<view>大业美家分公司</view>
			<view class="lastfont2">—— 贵宾热线 ——</view>
			<view class="phone">
				<view class="phone-item" v-for="(item,index) in last" :key="index">
					<view>{{item}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				params: {
					province: true,
					city: true,
					area: true
				},
				city: null,
				list: [{
						image: 'https://img1.baidu.com/it/u=1066150290,1612459096&fm=253&fmt=auto&app=120&f=JPEG?w=929&h=500',
						title: '1'
					},
					{
						image: 'https://img2.baidu.com/it/u=1766992653,1125916224&fm=253&fmt=auto&app=120&f=JPEG?w=936&h=500',
						title: '2'
					},
					{
						image: 'https://media.9game.cn/gamebase/ieu-gdc-pre-process/images/20231116/10/26/724a676369a42bef3f7d924e3e00a1f5.jpg',
						title: '3'
					}
				],
				last: [
					"北京: 400-100-1611",
					"南京: 400-100-0619",
					"武汉: 400-888-4798",
					"济南: 400-656-8188",
					"成都: 400-028-0229",
					"南宁: 400-606-6290",
					"郑州: 400-114-0371",
					"沈阳: 400-024-6096",
					"无锡: 400-668-7771",
					"昆山: 400-051-2765",
					"东莞: 400-154-6066",
					"佛山: 400-861-3208"
				]
			}
		},
		onLoad() {

		},
		methods: {
			getCity(e) {
				this.city = e.area.label + e.city.label + e.province.label
				console.log(this.city);

			}
		}
	}
</script>

<style scoped lang="scss">
	.box1 {
		height: 400rpx;
	}

	.box2 {
		.grid-text {
			font-size: 28rpx;
			margin-top: 4rpx;
			color: $u-type-info;
		}
	}

	.box3 {
		width: 95%;
		margin: auto;
		margin-bottom: 60rpx;

		.box3-top {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
		}

		.box3-center {
			position: relative;
			margin-top: 20rpx;

			.box3-center1 {
				image {
					width: 100%;
				}
			}

			.box3-center2 {
				background-color: rgba(0, 0, 0, 0.5);
				color: #fff;
				padding: 5rpx 0 5rpx 20rpx;
				width: 711rpx;
				position: absolute;
				bottom: 0;
			}
		}
	}

	.box4 {
		width: 95%;
		margin: auto;
		margin-bottom: 60rpx;

		.box4-top {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
		}

		.box4-center {
			width: 95%;
			margin: auto;
			display: flex;
			justify-content: space-between;

			.box4-center1 {
				width: 32%;

				image {
					width: 100%;
					height: 270rpx;
				}

				.font1 {
					text-align: center;
					background-color: #efefef;
					font-size: 2rpx;
				}
			}
		}
	}

	.box5 {
		width: 95%;
		margin: auto;
		margin-bottom: 60rpx;

		.box5-top {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
		}

		.box5-bottom {
			display: flex;
			justify-content: space-around;

			.box5-bottom1 {
				width: 48%;
				position: relative;

				image {
					width: 100%;
					height: 400rpx;
				}

				.a1 {
					position: absolute;
					top: 0;
					background-color: rgba(0, 0, 0, 0.3);
					color: #fff;
					padding: 5rpx 10rpx;
				}
			}

			.box5-bottom2 {
				width: 48%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.little-box {
					width: 48%;
					position: relative;

					image {
						width: 100%;
						height: 190rpx;
					}

					.a2 {
						position: absolute;
						top: 0;
						background-color: rgba(0, 0, 0, 0.3);
						color: #fff;
						padding: 5rpx 10rpx;
					}
				}
			}

		}
	}

	.box6 {
		width: 95%;
		margin: auto;
		margin-bottom: 60rpx;

		.box6-top {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
		}

		.box6-bottom {
			display: flex;
			justify-content: space-between;

			.box6-center {
				width: 48%;
				position: relative;
				margin-top: 20rpx;
				display: flex;

				.box6-center1 {
					image {
						width: 344rpx;
						height: 280rpx;
					}
				}

				.box6-center2 {
					background-color: rgba(0, 0, 0, 0.5);
					color: #fff;
					padding: 5rpx 0 5rpx 20rpx;
					width: 344rpx;
					position: absolute;
					bottom: 0;
				}
			}
		}
	}

	.box7 {
		width: 95%;
		margin: auto;
		margin-bottom: 60rpx;

		.box7-top {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
		}

		.box7-center {
			position: relative;
			margin-top: 20rpx;
			display: flex;

			.box7-center1 {
				image {
					width: 711rpx;
					height: 300rpx;
				}
			}

			.box7-center2 {
				background-color: rgba(0, 0, 0, 0.5);
				color: #fff;
				padding: 5rpx 0 5rpx 20rpx;
				width: 711rpx;
				position: absolute;
				bottom: 0;
			}
		}
	}

	.box8 {
		width: 95%;
		margin: auto;
		margin-bottom: 60rpx;

		.box8-top {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
		}

		.box8-bottom {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.box8-center {
				width: 48%;
				display: flex;
				box-shadow: 20rpx 30rpx 20rpx #ededed;
				justify-content: space-between;
				margin-bottom: 20rpx;

				image {
					width: 48%;
					height: 170rpx;
				}

				.box8-center2 {
					width: 48%;

					.box8-font1 {
						font-weight: bolder;
						margin-top: 10rpx;
					}

					.box8-font2 {
						font-size: 40rpx;
						border-bottom: 1px solid #000;
					}

					.box8-font3 {
						margin-top: 10rpx;
						font-weight: 400;
					}
				}
			}
		}
	}

	.box9 {
		width: 95%;
		margin: auto;
		margin-bottom: 60rpx;

		image {
			width: 100%;
		}
	}

	.box10 {
		width: 95%;
		margin: auto;
		margin-bottom: 60rpx;

		.box10-center {
			width: 90%;
			margin: auto;
			text-align: center;

			.font1 {
				font-size: 60rpx;
				color: #c26636;
			}

			.font2 {
				font-size: 24rpx;
				color: #9c9b9a;
			}

			.city {
				border: 1px solid #efefef;
				width: 95%;
				height: 80rpx;
				margin: auto;
				margin-bottom: 10rpx;
				// box-sizing: border-box;
				// overflow: hidden;
				// position: relative;

			}

			.text {
				border: 1px solid #ededed;
				width: 95%;
				height: 80rpx;
				margin: auto;
				text-align: left;
				padding-left: 20rpx;
				box-sizing: border-box;
				margin-bottom: 10rpx;
			}

			button {
				width: 95%;
				margin: auto;
				background-color: #c26636;
				color: white;
				font-weight: bold;
				height: 80rpx;
				border-radius: 0rpx;
				margin-bottom: 80rpx;
				line-height: 80rpx;
			}
		}
	}

	.last {
		width: 100%;
		margin: auto;
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 40rpx;
		background-color: #efefef;

		lastfont2 {
			font-size: 26rpx;
			color: #646261;
			margin-top: 10rpx;
			margin-bottom: 30rpx;
		}

		.phone {
			width: 90%;
			margin: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.phone-item {
				width: 30%;
				font-size: 21rpx;
				padding: 10rpx;
			}
		}
	}
</style>